import Taro, {Component} from '@tarojs/taro'
import {View, Image, Text} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import * as actions from '../../actions/product'
import Navbar from "../../components/Navbar";
import './index.scss'


@connect(state => state.product, {...actions})
class Like extends Component {

  static options = {
    addGlobalClass: true
  }

  config = {
    navigationBarTitleText: '我的收藏',
    enablePullDownRefresh: false,
    navigationStyle: "custom"
  }

  componentWillMount() {
  }

  componentDidMount() {
    this.props.dispatchProductLikeList()
  }


  componentDidHide() {
  }

  componentCatchError() {
  }

  onPullDownRefresh() {
    this.props.dispatchProductLikeList().then(() => {
      Taro.stopPullDownRefresh()
    })
  }

  render() {
    const {likeList} = this.props
    return (
      <View className="like_page">
        <Navbar type="icon" fixed={false} title={'我的收藏'}></Navbar>
        {
          likeList.length > 0 && <View className="like_page_row">
            {
              likeList.map(item => (
                <View className="like_page_col">
                  <View className="like_page_item" onClick={this.jump.bind(this, item)}>
                    <Text className="like_page_count">{item.imgCount}</Text>
                    <View className="like_page_item_item">
                      <Image mode="scaleToFill" src={item.bannerImage.url} className="like_page_image" lazyLoad
                             webp></Image>
                    </View>
                  </View>
                </View>
              ))
            }
          </View>
        }
        {
          likeList.length == 0 &&
          <View></View>
        }
      </View>
    )
  }


  jump(item) {
    const {productId, productName} = item
    Taro.navigateTo({
      url: `/pages/detail/index?id=${productId}&name=${productName}`
    })
  }

}

export default Like
